<header>
  <div class="left">
    <span [ngClass]="{on:active== 0}" (click)="onClick(0)">日</span>
    <span [ngClass]="{on:active== 1}" (click)="onClick(1)">月度</span>
    <span [ngClass]="{on:active== 2}" (click)="onClick(2)">年度</span>

  </div>
  <div class="select " *ngIf="selectOptions?.length">
    <span class="query-title">选择发电类型:</span>
    <select name="" id="" [(ngModel)]="selectedOption">
      <option *ngFor="let item of selectOptions" [value]="item?.categorytag">{{item?.categoryName}}</option>
    </select>
    <!-- <p-dropdown [options]="selectOptions" [(ngModel)]="selectedOption" (onChange)="onChange($event)"></p-dropdown> -->
    <!-- <p-dropdown [options]="selectOptions" [style]="{'width':'150px','height': '35px'}" [(ngModel)]="selectedOption"
      placeholder="请选择发电类型" optionField="categoryName">
      <ng-template let-item pTemplate="item">
        <span>{{item.categoryName}}
        </span>
      </ng-template>
    </p-dropdown> -->
  </div>
  <div class="right" *ngIf="active">
    开始时间：
    <span>
      <!--<select #year (click)="onClickYear(year.value)">
          <option *ngFor="let year of years"> {{year}}</option>
        </select>-->
      <select class="year" [(ngModel)]="startYear">
        <option [value]="year" *ngFor="let year of years"> {{year}} </option>
      </select>
      年

    </span>
    <span [ngStyle]="{'display':active == 1 ?'inline-block':'none'}">
      <!--<select #month (click)="onClickMonth(month.value)">
          <option *ngFor="let month of months"> {{month}}</option>
        </select>-->
      <select class="month" [(ngModel)]="startMonth">
        <option [value]="month" *ngFor="let month of months"> {{month}}</option>
      </select>
      月
    </span>
    结束时间：
    <span>
      <!--<select #year (click)="onClickYear(year.value)">
          <option *ngFor="let year of years"> {{year}}</option>
        </select>-->
      <select class="year" [(ngModel)]="endYear">
        <option [value]="year" *ngFor="let year of years"> {{year}} </option>
      </select>
      年

    </span>
    <span [ngStyle]="{'display':active == 1 ?'inline-block':'none'}">
      <!--<select #month (click)="onClickMonth(month.value)">
          <option *ngFor="let month of months"> {{month}}</option>
        </select>-->
      <select class="month" [(ngModel)]="endMonth">
        <option [value]="month" *ngFor="let month of months"> {{month}}</option>
      </select>
      月
    </span>
    <span>
      <button (click)="onSearch()">查询</button>
    </span>
  </div>
  <div class="right" *ngIf="!active">
    开始时间：
    <span>
      <!--<select #year (click)="onClickYear(year.value)">
          <option *ngFor="let year of years"> {{year}}</option>
        </select>-->
      <p-calendar [locale]="en" [(ngModel)]="startTime"></p-calendar>

    </span>
    结束时间：
    <span>
      <p-calendar [locale]="en" [(ngModel)]="endTime"></p-calendar>
    </span>
    <span>
      <button (click)="onSearch()">查询</button>
    </span>
  </div>
</header>
<main>
  <section *ngIf="!active">


    <p-dataTable [value]="rPowers" [rows]="15" [paginator]="true" (onRowSelect)="onRowSelect($event)"
      selectionMode="single" [(selection)]="selectedRPower">

      <p-column field="date" header="时间" *ngIf="active==0">
        <ng-template let-col let-data="rowData" pTemplate="body">
          <span>
            {{ data[col.field] | date:'yyyy-MM-dd' }}
          </span>
        </ng-template>
      </p-column>
      <p-column field="date" header="时间" *ngIf="active==1">
        <ng-template let-col let-data="rowData" pTemplate="body">
          <span>
            {{ data[col.field] | date:'yyyy-MM' }}
          </span>
        </ng-template>
      </p-column>
      <p-column field="date" header="时间" *ngIf="active==2">
        <ng-template let-col let-data="rowData" pTemplate="body">
          <span>
            {{ data[col.field] | date:'yyyy' }}
          </span>
        </ng-template>
      </p-column>
      <p-column field="farmName" header="风场">
        <ng-template let-col let-data="rowData" pTemplate="body">
          <span>
            {{ data?.phaseId? "----" + data?.phaseName :data?.farmName }}
          </span>
        </ng-template>
      </p-column>
      <p-column field="value" header="日电量（kWh）"></p-column>
      <p-column field="valueMonth" header="月电量（kWh）"></p-column>
      <p-column field="valueYear" header="年电量（kWh）"></p-column>
      <p-column field="powerName" header="发电类型"></p-column>
      <p-footer>
        <div class="ui-helper-clearfix" style="width:100%;display: flex;">
          <i class="exp" *ngIf="powerCategorytag == selectedOption">
            <a (click)="exportData(0,'ex')" id="ex">导出发电量</a>
          </i>
          <i class="exp" *ngIf="powerCategorytag != selectedOption">
            <a (click)="exportData(1,'ex2')" id="ex2">导出其他电量</a>
          </i>
          <p-fileUpload [ngClass]="{'fileUpload-edit':!file}" name="file" (uploadHandler)="onUpload($event)"
            (onRemove)="onRemove()" cancelLabel="取消" chooseLabel="发电量上传" customUpload="true" auto="false"
            enctype="multipart/form-data"></p-fileUpload>
          <p-fileUpload [ngClass]="{'fileUpload-edit':!fileOther}" name="file" (uploadHandler)="onUploadOther($event)"
            (onRemove)="onRemoveOther()" cancelLabel="取消" chooseLabel="其他电量上传" customUpload="true" auto="false"
            enctype="multipart/form-data"></p-fileUpload>
          <p-fileUpload [ngClass]="{'fileUpload-edit':!fileSpeed}" name="file" (uploadHandler)="onUploadSpeed($event)"
            (onRemove)="onRemoveSpeed()" cancelLabel="取消" chooseLabel="平均风速上传" customUpload="true" auto="false"
            enctype="multipart/form-data"></p-fileUpload>
        </div>
      </p-footer>
    </p-dataTable>

    <!--  <p-dialog header="电量详情" [(visible)]="displayDialog" [width]="300" [responsive]="true" showEffect="fade"
      [modal]="true">
      <div class="ui-grid ui-grid-responsive ui-fluid" *ngIf="currentRpower">
        <div class="ui-grid-row">
          <div class="ui-grid-col-7">
            <label for="farmName">风场</label>
          </div>
          <div class="ui-grid-col-5">
            {{currentRpower?.farmName}}
          </div>
        </div>

        <div class="ui-grid-row">
          <div class="ui-grid-col-7">
            <label for="datePlant">时间</label>
          </div>
          <div class="ui-grid-col-5">
            {{currentRpower?.date}}
          </div>
        </div>
        <div class="ui-grid-row">
          <div class="ui-grid-col-7">
            <label for="datePlant">发电类型</label>
          </div>
          <div class="ui-grid-col-5">
            {{currentRpower?.powerName}}
          </div>
        </div>
        <div class="ui-grid-row">
          <div class="ui-grid-col-7">
            <label for="datePlant">电量量（kWh）</label>
          </div>
          <div class="ui-grid-col-5">
            <input type="number" name="" id="" [(ngModel)]="changeValue">
          </div>
        </div>
      </div>

      <p-footer>
        <div class="ui-dialog-buttonpane ui-helper-clearfix">
          <button type="button" [disabled]="currentRpower?.value == changeValue" pButton icon="fa-check"
            (click)="save()" label="保存"></button>
        </div>
      </p-footer>
    </p-dialog> -->



  </section>
  <section *ngIf="active == 1">


    <p-dataTable [value]="rPowerMonths" [rows]="15" [paginator]="true" selectionMode="single"
      [(selection)]="selectedRPower">

      <p-column field="date" header="时间" *ngIf="active==0">
        <ng-template let-col let-data="rowData" pTemplate="body">
          <span>
            {{ data[col.field] | date:'yyyy-MM-dd' }}
          </span>
        </ng-template>
      </p-column>
      <p-column field="date" header="时间" *ngIf="active==1">
        <ng-template let-col let-data="rowData" pTemplate="body">
          <span>
            {{ data[col.field] | date:'yyyy-MM' }}
          </span>
        </ng-template>
      </p-column>
      <p-column field="date" header="时间" *ngIf="active==2">
        <ng-template let-col let-data="rowData" pTemplate="body">
          <span>
            {{ data[col.field] | date:'yyyy' }}
          </span>
        </ng-template>
      </p-column>
      <p-column field="farmName" header="风场"></p-column>
      <p-column field="value" header="发电量（kWh）"></p-column>
      <p-column field="powerName" header="发电类型"></p-column>
    </p-dataTable>
  </section>
  <section *ngIf="active == 2">


    <p-dataTable [value]="rPowerYears" [rows]="15" [paginator]="true" selectionMode="single"
      [(selection)]="selectedRPower">

      <p-column field="date" header="时间" *ngIf="active==0">
        <ng-template let-col let-data="rowData" pTemplate="body">
          <span>
            {{ data[col.field] | date:'yyyy-MM-dd' }}
          </span>
        </ng-template>
      </p-column>
      <p-column field="date" header="时间" *ngIf="active==1">
        <ng-template let-col let-data="rowData" pTemplate="body">
          <span>
            {{ data[col.field] | date:'yyyy-MM' }}
          </span>
        </ng-template>
      </p-column>
      <p-column field="date" header="时间" *ngIf="active==2">
        <ng-template let-col let-data="rowData" pTemplate="body">
          <span>
            {{ data[col.field] | date:'yyyy' }}
          </span>
        </ng-template>
      </p-column>
      <p-column field="farmName" header="风场"></p-column>
      <p-column field="value" header="发电量（kWh）"></p-column>
      <p-column field="powerName" header="发电类型"></p-column>
    </p-dataTable>


  </section>
</main>
<p-confirmDialog header="Confirmation" width="300" acceptLabel="是" rejectLabel="否"></p-confirmDialog>
